<template>
  <div class="app-container">
    <el-select v-model="year">
      <el-option value="2023"></el-option>
      <el-option value="2024"></el-option>
      <el-option value="2025"></el-option>
      <el-option value="2026"></el-option>
      <el-option value="2027"></el-option>
    </el-select>
    <el-radio-group v-model="month" style="margin: 0 3px;" >
      <el-radio-button label="01">1月</el-radio-button>
      <el-radio-button label="02">2月</el-radio-button>
      <el-radio-button label="03">3月</el-radio-button>
      <el-radio-button label="04">4月</el-radio-button>
      <el-radio-button label="05">5月</el-radio-button>
      <el-radio-button label="06">6月</el-radio-button>
      <el-radio-button label="07">7月</el-radio-button>
      <el-radio-button label="08">8月</el-radio-button>
      <el-radio-button label="09">9月</el-radio-button>
      <el-radio-button label="10">10月</el-radio-button>
      <el-radio-button label="11">11月</el-radio-button>
      <el-radio-button label="12">12月</el-radio-button>
    </el-radio-group>
    <br />
    <br />
    <el-calendar v-model="value"  style="max-width: 1060px">
      <template slot="dateCell" slot-scope="{ date, data }">
        <div :class="dayClass(data.day)" @click="switchConfig(data.day)">
          {{ data.day.split('-').slice(2).join('-') }}
          {{ holiday[data.day] === 1 ? '假期' : '工作日' }}
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import { loadHolidayConfig, saveHolidayConfig } from '@/api/holiday'
import utils from '@/utils/util'
export default {
  name: 'SysParams',
  directives: { waves },
  data() {
    return {
      value: null,
      year: utils.formatDate.format(new Date(), 'yyyy'),
      month: utils.formatDate.format(new Date(), 'MM'),
      holiday: {}
    }
  },
  watch: {
    value: {
      handler() {
        this.loadConfig(this.value).then((date) => {
          this.value = date
          this.year = date.substr(0, 4)
          this.month = date.substr(5, 2)
        })
      }
    },
    month: {
      handler() {
        this.loadConfig(this.year + '-' + this.month + '-01').then((date) => {
          this.value = date
        })
      }
    }
  },
  created() {
    this.loadConfig(utils.formatDate.format(new Date(), 'yyyy-MM')).then(() => {
      this.value = utils.formatDate.format(new Date(), 'yyyy-MM-dd')
    })
  },
  methods: {
    switchConfig(date) {
      let type = 1
      if (this.holiday[date] === 1) {
        type = 0
      }
      saveHolidayConfig(date, type).then(({ success }) => {
        if (success) {
          this.holiday[date] = type
          this.value = date
        }
      })
    },
    loadConfig(date) {
      return new Promise((resolve, reject) => {
        if (date instanceof Date) {
          date = utils.formatDate.format(date, 'yyyy-MM-dd')
        }
        loadHolidayConfig(date.substr(0, 7)).then(({ success, data }) => {
          if (success) {
            if (data && data.length > 0) {
              const hd = this.holiday
              data.forEach(item => {
                hd[item.date] = item.type
              })
            } else {
              this.holiday = {}
            }
          }
          resolve(date)
        }, (message) => {
          reject(false)
        })
      })
    },
    dayClass(date) {
      if (this.holiday[date] === 1) {
        return 'cd-day-holiday'
      }
      return 'cd-day-normal'
    }
  }
}
</script>

<style scoped>
::v-deep .el-calendar-table:not(.is-range) td.next div.el-calendar-day {
  display: none;
}
::v-deep .el-calendar-table:not(.is-range) td.prev div.el-calendar-day {
  visibility: hidden;
}
::v-deep .el-calendar__button-group {
  display: none;
}

.cd-day-holiday {
  background-color: green;
  color: white;
  height: 65px;
}
.cd-day-normal {
  height: 65px;
}
</style>
